<template>
  <el-dialog
    :visible="dialogTaskBookVisible"
    :close-on-click-modal="false"
    @close="closeDialog"
    :append-to-body="true"
    width="760px"
  >
    <!-- 对话框头部 -->
    <div
      slot="title"
      class="header-title"
      style="background-color: #409eff; color: #fff"
    >
      <div style="padding: 15px 20px">{{ dialogHeaderName }}</div>
    </div>

    <!-- 学生信息 -->
    <span
      >学生姓名：<i>{{ messages.student }}</i></span
    >
    <span
      >学号：<i>{{ messages.studentId }}</i></span
    >
    <span
      >专业：<i>{{ messages.major }}</i></span
    >
    <span
      >课题名称：<i>{{ messages.topicName }}</i></span
    >

    <!-- 任务书信息 -->
    <el-form :model="taskBookData">
      <div
        style="padding: 10px 0"
        v-for="(data, index) of taskBookData"
        :key="index"
      >
        <el-form-item
          :label="data.dateName"
          label-width="200px"
          :prop="data.date"
        >
          <el-date-picker
            v-model="data.date"
            style="width: 480px"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :label="data.contentName"
          label-width="200px"
          :prop="data.content"
        >
          <el-input
            placeholder="主要内容"
            v-model="data.content"
            style="width: 480px"
            hide-required-asterisk="false"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
    <el-form :model="data">
      <el-form-item label="主要参考文献：" label-width="200px" prop="document">
        <el-input
          type="textarea"
          rows="8"
          placeholder="参考文献"
          v-model="data.document"
          style="width: 480px"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- 对话框表格信息 -->
    <!-- 对话框表单 -->
    <div v-if="dialogTable">
      <tableTool style="margin: 0 30px 0 29px" />
      <el-table
        :data="dialogTableData"
        border
        style="width: 700px; margin: 0 30px"
      >
        <el-table-column prop="id" width="50" align="center"></el-table-column>
        <el-table-column prop="operator" label="操作人" width="120" sortable>
        </el-table-column>
        <el-table-column prop="role" label="角色" width="120" sortable>
        </el-table-column>
        <el-table-column
          prop="operationTime"
          label="操作时间"
          width="149"
          show-overflow-tooltip="true"
          sortable
        ></el-table-column>
        <el-table-column
          prop="operationType"
          label="操作类型"
          width="130"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="history"
          label="历史记录"
          width="130"
          align="center"
        >
          <el-button type="mini">查看详情</el-button>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :pager-count="5"
          background
          layout="prev, pager, next, jumper,sizes, total"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 审核信息 -->
    <el-form :model="review" v-if="dialogReviewed">
      <el-form-item
        label="审核意见："
        :rules="[{ required: true, message: '不能为空' }]"
        label-width="200px"
        prop="opinion"
      >
        <el-input
          type="textarea"
          rows="8"
          v-model="review.opinion"
          autocomplete="off"
          style="width: 480px"
          :readonly="readonly"
          hide-required-asterisk="false"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态：" label-width="200px">
        <el-radio-group v-model="review.status">
          <el-radio label="通过"></el-radio>
          <el-radio label="退回"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <!-- 对话框尾部 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="closeDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import tableTool from '@/components/Function/TableTool.vue';

export default {
  props: [
    'dialogHeaderName',
    'dialogTaskBookVisible',
    'messages',
    'dialogTable',
    'dialogReviewed',
  ],

  components: { tableTool },

  methods: {
    closeDialog() {
      this.$emit('closeDialogFormVisible');
    },
  },

  data() {
    return {
      // 任务书信息
      taskBookData: [
        {
          date: '',
          content: '',
          dateName: '起止日期01：',
          contentName: '主要内容01：',
        },
        {
          date: '',
          content: '',
          dateName: '起止日期02：',
          contentName: '主要内容02：',
        },
        {
          date: '',
          content: '',
          dateName: '起止日期03：',
          contentName: '主要内容03：',
        },
        {
          date: '',
          content: '',
          dateName: '起止日期04：',
          contentName: '主要内容04：',
        },
        {
          date: '',
          content: '',
          dateName: '起止日期05：',
          contentName: '主要内容05：',
        },
      ],

      // 参考文献信息
      data: {
        document: '',
      },

      // 对话框表格信息
      dialogTableData: [
        {
          id: 1,
          operator: '测试教师0922',
          role: '指导教师',
          operationTime: '2022-09-22 20:53:20',
          operationType: '提交',
        },
        {
          id: 2,
          operator: '测试教师0912',
          role: '系主任',
          operationTime: '2022-09-23 21:23:46',
          operationType: '提交',
        },
        {
          id: 3,
          operator: '测试教师0932',
          role: '评阅教师',
          operationTime: '2022-09-24 18:51:24',
          operationType: '提交',
        },
      ],

      // 审核信息
      review: {
        opinion: '',
        status: '',
      },
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding: 0px;
}

/deep/ .el-dialog__header {
  padding: 0px;
  margin-bottom: 20px;
}

/deep/ .el-dialog__headerbtn {
  top: 5px;
  right: 5px;
  padding-top: 10px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  height: 30px;
  width: 35px;
}
/deep/ .el-dialog__headerbtn .el-dialog__close:hover {
  color: gray;
}

.el-dialog {
  span {
    display: inline-block;
    margin: 10px 50px;
    font-weight: 700;

    i {
      font-style: normal;
      font-weight: 400;
    }
  }

  span:nth-child(4) {
    margin-bottom: 40px;
  }

  .el-form-item {
    margin-left: 20px;
  }

  .page {
    width: 698px;
    height: 40px;
    margin: 0 30px 20px;
    border: 1px solid #ebeef5;
  }
}
</style>
